<template>
	<view class="content" style="background-color:aliceblue;">
		<view class="kechengTiku">
			<view class="tabLIst" :class="tabIndex" @click="tabIndexFunsc(1)">精品课程</view>
			<view class="tabLIst" :class="tabIndex2" @click="tabIndexFunsc(2)">精品职位</view>
		</view>
		<scroll-view>
			<view class="borde-padd-24" style="margin-top: 150rpx;">
				<view class="splist">
					<view class="border-top-list" style="width: 50%;" v-if="tabIndex=='active'" @click="goPages('/pages/courseDetails/index?id='+item.special.id)" v-for="item in jobConList">
						<image class="left-ings" :src="item.special.image" mode=""></image>
						<view class="conterArr">
							<view class="ellipsis title">{{item.special.title}}</view>
						</view>
					</view>
				</view>
				
				<view class="position-list" v-if="tabIndex2=='active'" v-for="item in jobConList" @click="goPages('/pages/Job/JobDetails?id='+item.job.id)" >
					<view class="list-header flex-height-between">
						<text class="l">{{item.job.job_name}}</text>
						<text class="r" v-if="item.job.min_wage>0">{{item.job.min_wage}}-{{item.job.max_wage}}</text>
						<text class="r" v-else>面议</text>
					</view>
					<view class="label flex-wrap">
						
						<view class="label-list" v-if='item.job.nature_cn' style="border: 2rpx solid chocolate; color:chocolate;">{{item.job.nature_cn}}</view>
						<view class="label-list" v-if='item.job.experience_cn && item.job.experience_cn!="不限"' style="border: 2rpx solid forestgreen;color:forestgreen;">{{item.job.experience_cn}}</view>
						<view class="label-list" v-if='item.job.education_cn && item.job.education_cn != item.job.experience_cn' style="border: 2rpx solid steelblue; color: steelblue;">{{item.job.education_cn}}</view>
						<view class="label-list" v-if='item.job.amount>0' style="border: 2rpx solid cadetblue; color: cadetblue;">招{{item.job.amount}}人</view>
				
					</view>
					<view class="ellipsis stne">起始时间： {{item.job.start_time}}～{{item.job.end_time}} </view>
					<view class="ellipsis stne">工作地点： {{item.job.area_cn}} </view>
					<view class="flex-height-between">
						<view class="contenArrsbx flex-line-height">
							<!-- <image class="user-img" :src="item.get_company.company_show_logo" mode=""></image> -->
							<text>{{item.job.company_name}}</text>
							
						</view>
						
					</view>
				</view>
				
			</view>
		</scroll-view>
	<footerTer></footerTer>
		
	</view>
</template>

<script>
	import footerTer from "../../components/footer.vue"
	// special/learningRecords
import {
		Request
	} from '@/utils/request.js'
	export default{
		components:{
			footerTer
		},
		data(){
			return {
				tabIndex:'active',
				tabIndex2:'',
				page:1,
				jobConList:[],
				imgUrl:this.imgUrl,
			}
		},
		onLoad() {
			this.speciallearningRecords()
		},
		methods:{
			onSwitchFun(index){
				this.tabIndex=index;
			},
			scroll(e){
				this.page=this.page+1;
				this.joblist()
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			tabIndexFunsc(e){
				this.special_list=[];
				if(e==1){
					this.tabIndex='active';
					this.tabIndex2='';
					this.speciallearningRecords()				
				}else{
					this.tabIndex2='active';
					this.tabIndex='';
					this.jobcolectRecords()
				}
				// index==tabIndex
			},			
			speciallearningRecords(){
				Request('special/collectList',{
					
				}).then((res) => {
					//console.log(res.list)
					const tdata = res.list || [];
					
					this.jobConList = tdata;
				})
			},
			jobcolectRecords(){
				Request('job/collectList',{
					
				}).then((res) => {
					//console.log(res.list)
					const tdata = res.list || [];					
					this.jobConList = tdata;
				})
			}
		}
	}
</script>

<style scoped>
	.kechengTiku{
		display: flex;
		position: fixed;
		width: 700rpx;
		justify-content:space-between;
		font-family: PingFang SC, PingFang SC;	
		z-index: 999;
		padding: 24rpx;
		top:0rpx;
		height: 60rpx;
		background: #FFFFFF;
	}
	.tabLIst{
		height: 52rpx;
		width: 50%;
		margin-bottom: 16rpx;
		margin-right: 16rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		border: 2rpx skyblue solid;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		line-height: 52rpx;
		font-style: normal;
		text-transform: none;
	}
	.tabLIst.active{
		background-color: #3B5EEC;
		color: #FFFFFF;
	}
	.tablist.active::after{
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 50%;
		transform: translate(-50%);
		width: 48rpx;
		height: 4rpx;
		background: #3B5EEC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.list-header .l{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.list-header .r{
		font-family: MiSans, MiSans;
		font-weight: 600;
		min-width: 70rpx;
		font-size: 28rpx;
		color: #ff0000;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.contenArrsbx{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		line-height: 56rpx;
		overflow: hidden;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.splist{
		display: flex;
		justify-content:space-between;
		background: #FFFFFF;
		flex-wrap:wrap;
	}

	.border-top-list{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 16rpx;
		padding: 16rpx;
		box-sizing: border-box;
	}
	
	.left-ings{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 100%;
		height: 194rpx;
	}
	
	.conterArr{
			box-sizing: border-box;
			padding: 0 24rpx;
			padding-top: 8rpx;
		}
		.conterArr	  .title{
			    font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0D0E0F;
				text-align: left;
				font-style: normal;
				text-transform: none;
		}
		.questionbank-conter{
			margin-bottom: 40rpx;
		}
		
		.position-list{
			padding: 24rpx;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 16rpx;
		}
		.position-list .stne{
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #000000;
			text-align: left;
			margin-bottom: 16rpx;
			margin-top: 10rpx;
			font-style: normal;
			text-transform: none;
		}
		.position-list .cten{
			width: 144rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
			font-style: normal;
			text-transform: none;
			background: #3B5EEC;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
		.label-list{
			height: 48rpx;
			padding: 0 16rpx;
			background: #F7F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin: 18rpx 0;
			margin-right: 16rpx;
			text-align: center;
			line-height: 48rpx;
			font-style: normal;
			text-transform: none;
		}
		.conte  .lis{
		height: 40rpx;
		background: #F2F4F7;
		box-sizing: border-box;
		padding: 5rpx 12rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		margin-right: 8rpx;
		text-transform: none;
	}
		 .money{
		font-family: MiSans, MiSans;
		font-weight: 600;
		margin-top: 16rpx;
		font-size: 32rpx;
		color: #E26262;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		 .fuho{
		font-size: 24rpx;
		padding-top: 9rpx;
		margin-right: 5rpx;
	}
	.jilisy{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		padding-top: 16rpx;
		text-transform: none;
	}
	.conbenetArr{
		width: 750rpx;
		height: 122rpx;
		background: #F7F8FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.user-kechen{
		flex: 1;
		text-align: center;
	}
	.user-kechen .num{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.user-kechen .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #646669;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.imag-lis-img{
		width: 96rpx;
		margin-right: 16rpx;
		height: 96rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.state_box .state{
		width: 60rpx;
		height: 32rpx;
		background: #419CF7;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 32rpx;
		font-style: normal;
		text-transform: none;
		margin-right: 16rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
		
	.state_box .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.learningRecord-list{
		padding-bottom: 40rpx;
	}
	.learningRecord-list .shijian {
		width: 196rpx;
		height: 40rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #E1E4E8;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: center;
		line-height: 40rpx;
		margin-top: 16rpx;
		font-style: normal;
		text-transform: none;
	}
	.learningRecord-list .tag{
		width: 96rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #3B5EEC;
		text-align: center;
		line-height: 56rpx;
		font-style: normal;
		margin-left: 12rpx;
		text-transform: none;
		height: 56rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.tag.left{
		background: #E5E8F7;
		color: #3B5EEC;
	}
	.tag.right{
		background:#3B5EEC;
		color: #fff;
	}
</style>